<template>
  <div id="appeal-work-order">
    <div class="search-box">
        <el-form>
             <el-form-item label="订单号 ：">
               <el-input placeholder="请输入任务ID" v-model="searchForm.orderNum" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="推手账号：">
               <el-input placeholder="请输入任务ID" v-model="searchForm.tbName" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="任务ID：">
               <el-input placeholder="请输入任务ID" v-model="searchForm.taskCode" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="申诉ID：">
               <el-input placeholder="请输入申诉ID" v-model="searchForm.appealCode" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="提交时间：">
              <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" size="small" v-model="searchTime"  @change="changeTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']" ></el-date-picker>
             </el-form-item>
             <el-form-item label="任务类型：">
               <el-select v-model="searchForm.taskType" placeholder="请选择类型" size="small">
                 <el-option v-for="(item, index) in appealTaskType" :key="index" :label="item.label" :value="item.value"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="任务状态：">
               <el-select v-model="searchForm.status" placeholder="请选择类型" size="small">
                 <el-option v-for="(item, index) in appealTaskStatus" :key="index" :label="item.label" :value="item.value"></el-option>
               </el-select>
             </el-form-item>
            <el-form-item>
                <el-button class="search-btn" icon="el-icon-ali-search" @click="searchData">查&nbsp;询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="reset-btn" icon="el-icon-ali-reset" @click="resetSearchParam">重&nbsp;置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="platform_type" label="店铺类型/店铺名称">
          <div slot-scope="scope">
           <div class="textColor">{{getShopType(scope.row)}}</div>
           <div>{{scope.row.shop_name}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="task_code" label="任务ID/申诉ID">
         <div slot-scope="scope">
            <div class="textColor">{{scope.row.task_code}}</div>
            <div style="color: #ee7b5a;">{{scope.row.appeal_code}}</div>
         </div>
        </el-table-column>
        <el-table-column prop="tb_name" label="推手账号/订单号">
          <div slot-scope="scope">
              <div class="textColor">{{scope.row.tb_name}}</div>
              <div style="color: #ee7b5a;">{{scope.row.order_num ? scope.row.order_num : '--'}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="task_type" label="申诉类型/申诉状态">
          <div slot-scope="scope">
             <div class="textColor">{{getTypeName(scope.row)}}</div>
             <div style="color: #ee7b5a;">{{getStatusName(scope.row)}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="appeal_why" label="申诉原因">
          <div slot-scope="scope">
             <div style="color: #ee7b5a;">{{scope.row.appeal_why}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="appeal_why" label="处理结果">
          <div slot-scope="scope">
             <div class="textColor">{{scope.row.appeal_result ? scope.row.appeal_result : '--'}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="create_time" label="提交时间/处理时间">
            <div slot-scope="scope">
               <div>{{scope.row.create_time}}</div>
               <div>{{scope.row.treat_time}}</div>
            </div>
        </el-table-column>
        <el-table-column label="操作"  fixed="right"  class-name="shenghe">
           <div slot-scope="scope">
             <el-button class="appeal-check-btn" size="mini" @click="examine(scope.row)">查看</el-button>
           </div>
        </el-table-column>
      </el-table>
      <div class="table-footer">
        <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="searchForm.pageSize" :current-page="searchForm.page" layout="total, sizes, prev, pager, next, jumper"
          :total="pageToatal" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
    <el-dialog title="查看" :visible.sync="isShowDialog" width="800px" class="appeal-dialog">
      <div>
        <div class="marginTop10">申诉信息：{{showDialogData.content}}</div>
        <div class="marginTop10">处置建议：{{showDialogData.treat_content}}</div>
        <div class="marginTop10">申诉原因：{{showDialogData.appeal_why}}</div>
        <div class="marginTop10">处理结果：{{showDialogData.appeal_result}}</div>
        <div class="marginTop10" v-if="imgArr.length > 0">
          <div>申诉凭证：</div>
          <div class="appeal-img" v-for="(item, index) in imgArr" :key="index" @mouseenter="displayLargeImage" @mouseleave="hideLargeImage">
            <img class="appeal-img-small" :src="item">
            <img class="appeal-img-large" :src="item">
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    apiAppealTask
  } from '../../request/api.js'
  export default{
    data(){
      return {
        searchForm:{
          token: '',
          page: 1,
          pageSize: 10,
          orderNum: '',
          tbName: '',
          taskType: '',
          taskCode: '',
          appealCode: '',
          startTime: '',
          endTime: '',
          status: ''
        },
        appealTaskType:[{
          label: '全部',
          value: ''
        },{
          label: '销量',
          value: 1
        },{
          label: '流量',
          value: 2
        },{
          label: '评价',
          value: 3
        }],
        appealTaskStatus: [{
          label: '全部',
          value: ''
        },{
          label: '已提交',
          value: 1
        },{
          label: '正在处理',
          value: 2
        },{
          label: '已完成',
          value: 3
        }],
        searchTime: [],
        shopNameList: [],
        shopNameOptions: [],
        platformNameObject:{
          1: '淘宝',
          2: '天猫',
          3: '京东',
          4: '1688',
          13: '唯品会',
          15: '拼多多'
        },
        typeName: {
          1: '销量',
          2: '流量',
          3: '评价'
        },
        statusName: {
          1: '已提交',
          2: '正在处理',
          3: '已完成'
        },
        showDialogData:{
          content: '',
          treat_content: '',
          appeal_why: '',
          appeal_result: ''
        },
        pageToatal: 0,
        tableData: [],
        isShowDialog: false,
        imgArr: [],
        pickerOptions: {
          disabledDate(time) {
             let merchantTime = window.localStorage.getItem('merchantTime')
             let curDate = (new Date()).getTime();
             let three = merchantTime * 24 * 3600 * 1000;
             let threeMonths = curDate - three;
             return time.getTime() < threeMonths;
          },
        },
        userToken: window.localStorage.getItem('token')
      }
    },
    created() {
      this.searchForm.token = this.userToken
      // this.setSearchFormTime()
      this.getTableData()
    },
    methods:{
       setSearchFormTime() {
         let now = new Date()
         let year = now.getFullYear()
         let month = now.getMonth()

         let startMS = new Date(year, month, 1).getTime()
         let endMS = now.getTime()

         this.searchForm.startTime = parseInt(startMS / 1000)
         this.searchForm.endTime = parseInt(endMS / 1000)

         this.searchTime = [this.formatTime(startMS), this.formatTime(endMS)]
       },
       // 格式化提交时间 日期
       formatTime(dateString) {
         let time = new Date(parseInt(dateString))
         let year = time.getFullYear()
         let month = time.getMonth()
         let day = time.getDate()
         let hour = time.getHours()
         let minute = time.getMinutes()
         let second = time.getSeconds()

         if (month.toString().length < 2) month = '0' + month
         if (day.toString().length < 2) day = '0' + day
         if (hour.toString().length < 2) hour = '0' + hour
         if (minute.toString().length < 2) minute = '0' + minute
         if (second.toString().length < 2) second = '0' + second
         return new Date(year, month, day, hour, minute, second)
       },
       getTableData(){
         this.$isClick(true);
          apiAppealTask(this.searchForm).then(res =>{
            this.$isClick(false);
             if (res.code == 1){
              this.tableData = res.msg.res
              this.pageToatal = res.msg.allNum
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              this.$message.error(res.msg)
          })
       },
       examine(item) {
         this.showDialogData = {
           content: item.content,
           treat_content: item.treat_content,
           appeal_why: item.appeal_why,
           appeal_result: item.appeal_result ? item.appeal_result : '暂无'
         }
         if(item.proof_img_url){
           this.imgArr = item.proof_img_url.split(',')
         }
         this.isShowDialog = true
       },
        getTypeName(row){
          return this.typeName[row.task_type]
        },
        getStatusName (row){
           return this.statusName[row.status]
        },
        getShopType(row){
          return this.platformNameObject[row.shop_type]
        },
       searchData(){
         this.searchForm.page = 1
         this.searchForm.pageSize = 10
         this.getTableData()
       },
       resetSearchParam(){
        this.searchForm = {
           token: this.userToken,
           page: 1,
           pageSize: 10,
           orderNum: '',
           tbName: '',
           taskType: '',
           taskCode: '',
           appealCode: '',
           startTime: '',
           endTime: '',
           status: ''
         }
       },
       handleSizeChange(val) {
       	this.searchForm.pageSize = val;
       	this.getTableData()
       },
       handleCurrentChange(val) {
       	this.searchForm.page = val;
       	this.getTableData()
       },
       changeTime(val){
        if (this.searchTime == null) {
          this.searchForm.startTime =  ''
          this.searchForm.endTime =  ''
        } else{
          this.dataDiff(val[0],val[1])
          this.searchForm.startTime =  this.changeTimeType(val[0])
          this.searchForm.endTime =  this.changeTimeType(val[1])
        }
       },
       dataDiff(startTime,endTime){
         let diff = endTime-startTime
         let t = 31*24*60*60*1000
         if(diff>t){
          this.$message.error('时间范围不能超过31天')
          this.searchTime = []
           return false;
         }
       },
       changeTimeType(time){
         var d = new Date(time);
         var s = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
         return new Date(s).getTime() /1000;
       },
       hideLargeImage(e) {
         e.target.children[1].style.display = 'none';
       },

       displayLargeImage(e) {
         const parentPosition = e.target.getBoundingClientRect();
         const target = e.target.children[1];
         target.style.display = 'block';
         const targetPosition = target.getBoundingClientRect();
         target.style.left = `${parentPosition.left - targetPosition.width}px`;
         target.style.top = `${parentPosition.top - (targetPosition.height)/2}px`;
       },
    }
  }
</script>

<style lang="less">
  #appeal-work-order{
    .appeal-check-btn {
      background: @themeColor;
      color: #fff;
      padding: 8px 15px!important;
    }
    .marginTop10 {
      margin-top: 10px;
    }
    .appeal-dialog {
      .appeal-img {
        position: relative;
        display: inline-block;
        margin-right: 20px;
        .appeal-img-small {
           margin: 0 auto;
           display: flex;
           width: 200px;
           height: 300px;
           border: 1px solid #e0e0e0;
           border-radius: 5px;
        }
        .appeal-img-large {
          display: none;
          position: fixed;
          box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
          left: 0;
          top: -100%;
          width: 300px;
          height: 80%;
          z-index: 9;
        }
      }

    }
  }
  .el-popover {
    .goods-preview-img,.keyword-preview-img {
      width: 200px;
      height: 200px;
    }
    .user-preview-img {
      width: 200px;
      height: 300px;
    }
  }
</style>
